<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多个独立级联演示</title>
    <script type="text/javascript" src="Region.js"></script>
  </head>

  <body>
    不加载任何数据:<br />
    <span>*</span> 省
    <select id="selProvince" style="width: 80px" name="selProvince"></select>
    <span>*</span> 市
    <select id="selCity" name="selCity"></select>
    <span>*</span> 县/区
    <select id="selArea" name="selArea"></select>
    <!-- &nbsp; -->
    <input
      type="button"
      onclick="AreaSelector({
			selProvinceId:'selProvince',
			selCityId:'selCity',
			selAreaId:'selArea'
			}).initProvince(4,3,22)"
			value="Load"
    />
    <!-- &nbsp; -->
    <!-- <input type="button" onclick="a.initProvince(4,3,22)" value="Load2" /> -->
    <br />
    <br />
    <br />
    默认加载省份：<br />
    <span>*</span> 省
    <select id="selProvince2" style="width: 80px" name="selProvince2"></select>
    <span>*</span> 市
    <select id="selCity2" name="selCity2"></select>
    <span>*</span> 县/区
    <select id="selArea2" name="selArea2"></select>
    <script>
      function abc() {
        alert(this.selectedIndex);
      }
      var a = AreaSelector({
        isLoadOnInit: false,
        selProvinceId: "selProvince",
        selCityId: "selCity",
        selAreaId: "selArea",
      });

      var b = AreaSelector({
        selProvinceId: "selProvince2",
        selCityId: "selCity2",
        selAreaId: "selArea2",
        onProvinceChange: function () {
          alert(this.options[this.selectedIndex].value);
        },
        onCityChange: abc,
        onAreaChange: abc,
      });
      b.initProvince(4, 3, 22);
      //b.initProvince()
    </script>
  </body>
</html>
